/*
Theme Name: toekneestuck
Theme URI: http://www.toekneestuck.com/
Description: My theme, bitch!
Author: Tony Stuck
Version: 1.0
License: Private
License URI: license.txt
*/

/*
 *
 * blue: #2081B2
 * orange: #ec4f24
 * pale green: #A7BCAD
 * green: #76CC13
 *
 */
 ::-webkit-selection,
 ::-moz-selection,
 ::selection{background-color:rgba(167,188,173,0.6)}
 
html,body{height:100%}
body{background:#cecece url(img/texture-paper-grey.jpg) repeat top left fixed;color:#444;font:600 100%/1.5 "ff-enzo-web-1","ff-enzo-web-2", "Helvetica-Neue", "Helvetica Neue", Helvetica, Arial, sans-serif}

/**** Serif Styles *****/
.btn,
.cbtn a,
.headline,
#portfolio .page-title .h4,
#playpen .title{font-family:"arvo-1","arvo-2",serif;}

/* h1,h2,h3,h4,h5,h6{font-family:"edo-1","edo-2";font-weight:normal} */
h1,h2,h3,h4,h5,h6{text-shadow:1px 1px 0 rgba(255,255,255,0.4);}
h1,.h1{font-size:2.75em;line-height:1}
h2,.h2{font-size:2em;line-height:1.2}
h3,.h3{font-size:1.625em}
h4,.h4{font-size:1.5em}
h5,.h5{font-size:1.375em}
h6,.h6{font-size:1.25em}
a, a img{color:#ec4f24;text-decoration:none;
	-webkit-transition: 	all 0.1s linear;
	-moz-transition: 		all 0.1s linear;
	-ms-transition: 		all 0.1s linear;
	-o-transition: 			all 0.1s linear;
	transition: 				all 0.1s linear;
}
a:hover{background:rgba(255,255,255,0.2);border-bottom:0.1em solid #ec4f24}
a:focus,a:active{background:rgba(0,0,0,0.1);border-bottom:0.1em solid #ec4f24;outline:none}
a:hover img{
	-webkit-box-shadow: 	0 0 15px rgba(0,0,0,0.3);
	-moz-box-shadow:		0 0 15px rgba(0,0,0,0.3);
	-ms-box-shadow:		0 0 15px rgba(0,0,0,0.3);
	-o-box-shadow:			0 0 15px rgba(0,0,0,0.3);
	box-shadow:				0 0 15px rgba(0,0,0,0.3);
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#444}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color:#333}
small{font-size:70%}

textarea{margin:0}
input,textarea{border:1px solid #999;padding:0.45em;
	-webkit-box-shadow: 	inset 1px 1px 2px rgba(0,0,0,0.1);
	-moz-box-shadow: 		inset 1px 1px 2px rgba(0,0,0,0.1);
	-ms-box-shadow: 		inset 1px 1px 2px rgba(0,0,0,0.1);
	-o-box-shadow: 			inset 1px 1px 2px rgba(0,0,0,0.1);
	box-shadow: 				inset 1px 1px 2px rgba(0,0,0,0.1);
	
	-webkit-border-radius:	3px;
	-moz-border-radius:		3px;
	-ms-border-radius:		 	3px;
	-o-border-radius:		 	3px;
	border-radius:		 			3px;
	
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
	
	-webkit-box-sizing: 	border-box;
	-moz-box-sizing: 		border-box;
	-ms-box-sizing: 		border-box;
	box-sizing: 			border-box;
}
input:focus,
textarea:focus{border-color:#ec4f24;outline:none}

.left{float:left}
.right{float:right}
.block{display:block}
.center{text-align:center}
.hide{left:-9999em}
.nodisplay{display:none}
.loader{background:transparent url(img/ajax-loader.gif) no-repeat center center;display:block;height:24px;left:0;position:absolute;width:100%}

.btn,
.cbtn a,
input.button,
#submit{
	background-color: #ec4f24;
	background-image: -moz-linear-gradient(top, #F78A19, #ec4f24);
	background-image: -o-linear-gradient(top, #F78A19, #ec4f24);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F78A19),color-stop(1, #ec4f24));
	background-image: -webkit-linear-gradient(#F78A19, #ec4f24);
	background-image: linear-gradient(top, #F78A19, #ec4f24);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F78A19', EndColorStr='#ec4f24');

	border: 1px solid #ec4f24;
	color:white;
	display:inline-block;
	font-weight:700;
	padding: 0.3em 1em;
	
	-webkit-border-radius: 	0.4em;
	-moz-border-radius: 		0.4em;
	-ms-border-radius: 			0.4em;
	-o-border-radius: 			0.4em;
	border-radius: 					0.4em;
	
	-webkit-box-shadow:	0 2px 5px rgba(0,0,0,0.4);
	-moz-box-shadow:		0 2px 5px rgba(0,0,0,0.4);
	-ms-box-shadow:		0 2px 5px rgba(0,0,0,0.4);
	-o-box-shadow:			0 2px 5px rgba(0,0,0,0.4);
	box-shadow:				0 2px 5px rgba(0,0,0,0.4);
	
	-webkit-text-shadow:	0 -1px 1px rgba(0,0,0,0.5);
	-moz-text-shadow:		0 -1px 1px rgba(0,0,0,0.5);
	-ms-text-shadow:		0 -1px 1px rgba(0,0,0,0.5);
	-o-text-shadow:			0 -1px 1px rgba(0,0,0,0.5);
	text-shadow:				0 -1px 1px rgba(0,0,0,0.5);
}
.btn:hover,
.cbtn a:hover,
input.button:hover,
#submit:hover{
	background-color: #FFA538;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FFA538),color-stop(1, #D55B16));
	background-image: -webkit-linear-gradient(#FFA538, #D55B16);
	background-image: -moz-linear-gradient(top, #FFA538, #D55B16);
	background-image: -o-linear-gradient(top, #FFA538, #D55B16);
	background-image: linear-gradient(top, #FFA538, #D55B16);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFA538', EndColorStr='#D55B16');
	border-color:#D55B16;
}
.btn:active,
.cbtn a:active,
input.button:active,
#submit:active{
	background-color: #A25800;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #C07020),color-stop(1, #A25800));
	background-image: -webkit-linear-gradient(#C07020, #A25800);
	background-image: -moz-linear-gradient(top, #C07020, #A25800);
	background-image: -o-linear-gradient(top, #C07020, #A25800);
	background-image: linear-gradient(top, #C07020, #A25800);
	color:#ccc;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#C07020', EndColorStr='#A25800');
	border-color:#A25800;
}

.dark{
	background: #333 url(img/texture-lines-diag-ltr.png) repeat top left;
	color: #cecece;
	border-top:1px solid hsl(136, 10%, 49%);
	border-bottom:1px solid hsl(136, 10%, 49%);
	border-top:1px solid #bbb;
	border-bottom:1px solid #bbb;
	
	-webkit-box-shadow:	0 0 15px rgba(0,0,0,0.2), inset 0 5px 30px rgba(0,0,0,0.8);
	-moz-box-shadow:		0 0 15px rgba(0,0,0,0.2), inset 0 5px 30px rgba(0,0,0,0.8);
	-ms-box-shadow:		0 0 15px rgba(0,0,0,0.2), inset 0 5px 30px rgba(0,0,0,0.8);
	-o-box-shadow:			0 0 15px rgba(0,0,0,0.2), inset 0 5px 30px rgba(0,0,0,0.8);
	box-shadow:				0 0 15px rgba(0,0,0,0.2), inset 0 5px 30px rgba(0,0,0,0.8);
}
.dark h2, 
.dark h2 a{color:#cecece;
	-webkit-text-shadow:	3px 6px 8px rgba(0,0,0,0.4);
	-moz-text-shadow:		3px 6px 8px rgba(0,0,0,0.4);
	-ms-text-shadow:		3px 6px 8px rgba(0,0,0,0.4);
	-o-text-shadow:			3px 6px 8px rgba(0,0,0,0.4);
	text-shadow:				3px 6px 8px rgba(0,0,0,0.4);
}
.dark a{color:#999}
.dark a:hover{background:rgba(0,0,0,0.2)}

.cutout{background:rgba(0,0,0,0.1);border-top:2px dashed #aaa;border-bottom:2px dashed #aaa;padding:2em}

.gbox,
#respond{
	background: #A7BCAD;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#C4DACB),to(#A7BCAD));
	background-image: -webkit-linear-gradient(#C4DACB, #A7BCAD);
	background-image: -moz-linear-gradient(top, #C4DACB, #A7BCAD);
	background-image: -o-linear-gradient(top, #C4DACB, #A7BCAD);
	background-image: linear-gradient(top, #C4DACB, #A7BCAD);
	border:1px solid #A7BCAD;
	
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	
	-webkit-border-radius:	5px;
	-moz-border-radius:	 	5px;
	-ms-border-radius:		 	5px;
	-o-border-radius:		 	5px;
	border-radius:		 			5px;
	
	padding:1em;
}

/** Sticky Footer **/
.wrapper{min-height:100%;height:auto !important;height:100%;margin:0 auto -3.5em}
.wrapper:after{content:'';display:block;position:relative}
#footer,.wrapper:after{height:1.5em;padding:1em;position:relative}
#main{padding-bottom:2.5em}

/** Header **/
#header{
	background:#333 url(img/texture-lines-diag.png) repeat top left;
	border-bottom: 8px solid #ec4f24;
	height:8.375em;
	margin-bottom:2em;
	overflow:hidden;
	position:relative;
	
	-webkit-box-shadow: 	inset 0 0 1em rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 		inset 0 0 1em rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
	-ms-box-shadow: 		inset 0 0 1em rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
	-o-box-shadow: 			inset 0 0 1em rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
	box-shadow:				inset 0 0 1em rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
	
	-webkit-transition: 	height 0.5s ease-in-out;
	-moz-transition: 		height 0.5s ease-in-out;
	-o-transition: 			height 0.5s ease-in-out;
}
#header a:hover{border-bottom:none}
#header .row{height:100%}
#header .row>p{padding:1.25em 0}
#logo{
	background: transparent url(img/logo-toekneestuck.png) no-repeat 0 65%;
/* 	background-size:57.1% 100%; */
	display:block;	
/* 	height:100%; */
	height: 5.875em;
	max-width:21.25em;
	opacity: 0.7;
	position:relative;
	width:100%;
	
	-webkit-transition: 	all 0.5s ease-out;
	-moz-transition: 		all 0.5s ease-out;
	-o-transition:	 		all 0.5s ease-out;
}
#logo:hover{opacity:1;}
#logo span:first-child{background:transparent url(img/logo-toekneestuck-silhoutte.png) no-repeat top left;background-size:100% 100%;display:block;height:0;left:51%;opacity:0;overflow:hidden;position:relative;text-indent:-9999em;width:0}
/* #logo span:last-child{background:transparent url(img/logo-toekneestuck-com.png) no-repeat top right;background-size:100% 100%;display:block;height:20%;overflow:hidden;position:absolute;right:22%;text-indent:-9999em;top:80%;width:20%} */
#logo span:last-child{background:transparent url(img/logo-toekneestuck-com.png) no-repeat top right;display:block;height:20%;overflow:hidden;position:absolute;text-indent:-9999em;top:80%;width:68px;left:202px;}
#logo span:first-child{
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
}
#logo span:last-child{-webkit-transition: all 0.5s ease-in-out;}

/*
.home #header{height:14.06em;padding:2em}
.home #logo{background-size:57.1% 41.77%}
.home #logo span:first-child{height:100%;opacity:1;width:34.11%}
.home #logo span:last-child{height:8.3%;top:71%;right:0}
*/

/** Navigation **/
#nav, #nav ul{height:100%}
#nav ul{float:right;margin-right:5%}
#nav li{display:inline-block;font-size:115%;font-weight:700;height:100%;list-style:none}
#nav li a{
	box-sizing:border-box;
	border:1px solid transparent;
	color:#aeaeae;
	display:block;
	height:100%;
	line-height:1000%;
	margin:0 0.3em;
/* 	outline:1px solid transparent; */
	padding:0.5em 0.7em;
	text-shadow:0 1px 5px rgba(0,0,0,0.5);
	text-transform:lowercase;
	vertical-align: bottom;
	
	-webkit-transition: 	all 0.2s ease-out;
	-moz-transition: 		all 0.2s ease-out;
	-o-transition: 			all 0.2s ease-out;
	
	-webkit-text-shadow:	0 1px 5px rgba(0,0,0,0.5);
	-moz-text-shadow:		0 1px 5px rgba(0,0,0,0.5);
	-ms-text-shadow:		0 1px 5px rgba(0,0,0,0.5);
	-o-text-shadow:			0 1px 5px rgba(0,0,0,0.5);
}
#nav li a:hover,
#nav li a:focus, 
#nav li a.active,
#nav li.active a{
	background:rgba(0,0,0,0.2);
	box-shadow:0 0 5px rgba(0,0,0,0.5);
	border: 1px solid rgba(236,79,36,0.2);
	color:white;
/* 	outline-color:rgba(236,79,36,0.2); */
	
	-webkit-text-shadow:	0 0 10px rgba(255,255,255,0.4);
	-moz-text-shadow:		0 0 10px rgba(255,255,255,0.4);
	-ms-text-shadow:		0 0 10px rgba(255,255,255,0.4);
	-o-text-shadow:			0 0 10px rgba(255,255,255,0.4);
	text-shadow:				0 0 10px rgba(255,255,255,0.4);
}

/** Homepage Splash **/
#header+.splash{margin-top:-2em;}
.splash .logo{text-align:right;width:25%}
.splash dl{margin-left:25%;padding:1.5em;width:60%}
.splash dd{font-size:120%}
.splash dd ol{margin-left:2em}
.splash dd li{margin:0 0 0.5em}


/**** Articles *****/
.page-title{border-bottom:0.1em solid #aaa;border-color:rgba(170,170,170,0.7);margin-bottom:0.5em;padding-bottom:0.2em}
article header{margin-bottom:0.5em}
article header .entry-meta{display:block;position:relative}
article header .meta-category{background: transparent url(img/icon-category.png) no-repeat left center;padding-left: 35px;}
article header .meta-category a{color:#999;font-size:135%;font-weight:700;
	
	-webkit-text-shadow:	1px 1px 2px rgba(255,255,255,0.5);
	-moz-text-shadow:		1px 1px 2px rgba(255,255,255,0.5);
	-ms-text-shadow:		1px 1px 2px rgba(255,255,255,0.5);
	-o-text-shadow:			1px 1px 2px rgba(255,255,255,0.5);
	text-shadow:				1px 1px 2px rgba(255,255,255,0.5);
}
article header .entry-meta{font-size:80%;}
article header h1+p{margin-top:0.5em}
article ol, article ul{margin:1em 0 1em 3em}
article footer{font-size:85%;margin-top:1em}
article img.right,
article img.alignright{margin:0 0 1em 1em}
article img.left,
article img.alignleft{margin:0 1em 1em 0}

pre.prettyprint{background:#eee;border:1px solid #bbb;font-weight:normal;overflow:scroll;margin:1em 0;max-height:45em;padding:1em;
	-webkit-border-radius:	3px;
	-moz-border-radius:		3px;
	-ms-border-radius:		3px;
	-o-border-radius:		3px;
	border-radius:			3px;
}

/** Adjacents in Articles **/
section.list article+article{border-top:1px dotted #999;margin-top:1.8em;padding-top:1.2em}
article p+p,
article p+object{margin-top:1em}
article h1+h4{margin-top:0.5em}

/***** Widgets ******/
aside li{list-style:none}
.hbox{padding:2em}
.hbox hgroup{position:relative;}
.hbox hgroup h6.meta-category a{color:#555;left:0;position:absolute;top:0;text-shadow:0 1px 3px rgba(0,0,0,0.5)}
.hbox hgroup h6.meta-category a:hover{color:#777}
.hbox hgroup h2{padding-top:1em}
.hbox aside .details{color:#666;font-size:80%;margin-top:0.5em;text-shadow:1px 1px 3px rgba(0,0,0,0.5);word-wrap:break-word}
.hbox .headline{margin-bottom:0.75em;text-align:center}

#blog-preview .headline{
	background: rgba(0,0,0,0.4);
	border-top:1px dashed #A7BCAD;
	border-bottom:1px dashed #A7BCAD;
	color:#A7BCAD;
	display: block;
	width:75%;
	margin:0 auto 0.8em;
	padding: 0.2em 0;
	text-align:center;
	text-shadow:0 2px 10px rgba(0,0,0,0.5);
	-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), color-stop(0.5, rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
#blog-preview article+article{margin-top:0}

#highlights .projects ul{margin:0 auto 1em;width:94.5%}
#highlights .projects ul li{
	display:block;
	float:left;
	margin:0 2% 2% 0;
}
#highlights .projects ul li:nth-child(even){margin-right:0}
#highlights .projects ul a{display:block;overflow:hidden;position:relative}
#highlights .projects ul a img{display:block}
#highlights .projects ul a:hover{border-bottom:none}
#highlights .projects ul a:after{background:rgba(0,0,0,0.5);color:white;bottom:0;content: attr(title);display:block;left:0;opacity:0;padding:0.5em 0.8em;position:absolute;
	
	-webkit-transition: 	all 0.2s linear;
	-moz-transition: 		all 0.2s linear;
	-ms-transition: 		all 0.2s linear;
	
	border-radius: 					0 5px 0 0;
	-webkit-border-radius: 	0 5px 0 0;
	-moz-border-radius: 		0 5px 0 0;
	-ms-border-radius: 			0 5px 0 0;
	-o-border-radius: 			0 5px 0 0;
}
#highlights .projects ul a:hover:after{opacity:1;z-index:100}
#highlights .projects a.btn{text-align:center}

#highlights .social li{float:left;list-style:none;width:48%}
#highlights .social li:nth-child(odd){margin-right:1%;text-align:right}
#highlights .social li:nth-child(odd) a span{float:right;margin:0 0 0 0.6em;text-align:left}

.social li{font-size:1.35em;}
.social a{color:#333;cursor:pointer;display:block;height:1.8em;line-height:1.8em;padding:3%;
	-webkit-border-radius: 	25px;
	-moz-border-radius: 		25px;
	-ms-border-radius: 			25px;
	-o-border-radius: 			25px;
	border-radius: 					25px;
}
.social a span{display:block;float:left;height:100%;overflow:hidden;margin:0 0.6em 0 0;max-height:38px;max-width:39px;text-indent:-9999em;width:16%}
.social a span:after{height:100%;width:100%}
.social a:hover{border-bottom:none}

.social a span, .social a span:after{position:relative;
	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
}
.social a span:after{content:'';display:block;left:0;opacity:0;position:absolute;top:0;}
.social a:hover span{background-image:none;}
.social a:hover span:after{opacity:1;}
.social a:active{border:none}

.social a span,.social a span:after{background:transparent url(img/social-icons.png) no-repeat 0 0;}
.social .twitter span{background-position:-404px 0}
.social .forrst span{background-position:-160px 0}
.social .foursquare span{background-position:-120px 0}
.social .gowalla span{background-position:-200px 0}
.social .tumblr span{background-position:-363px 0}
.social .google span{background-position:-40px 0}
.social .lastfm span{background-position:-241px 0}
.social .facebook span{background-position:0 0}
.social .flickr span{background-position:-80px 0}
.social .behance span{background-position:-486px 0}
.social .youtube span{background-position:-445px 0}
.social .linkedin span{background-position:-281px 0}
.social .rdio span{background-position:-526px 0}
.social .meetup span{background-position:-322px 0}

/* .social a:hover span{-webkit-transform: translateX(-540%)} */
/* .social li:nth-child(even) a:hover span{-webkit-transform:translateX(540%)} */
.social .twitter span:after{background-position:-404px -38px;}
.social .forrst span:after{background-position:-160px -38px;}
.social .foursquare span:after{background-position:-120px -38px;}
.social .gowalla span:after{background-position:-200px -38px;}
.social .tumblr span:after{background-position:-363px -38px;}
.social .google span:after{background-position:-40px -38px;}
.social .lastfm span:after{background-position:-241px -38px;}
.social .facebook span:after{background-position:0 -38px;}
.social .flickr span:after{background-position:-80px -38px;}
.social .behance span:after{background-position:-486px -38px;}
.social .youtube span:after{background-position:-445px -38px;}
.social .linkedin span:after{background-position:-281px -38px;}
.social .rdio span:after{background-position:-526px -38px;}
.social .meetup span:after{background-position:-322px -38px;}

.social .twitter:hover span{
	-webkit-transform:	rotate(-16deg) scale(1.25);
	-moz-transform:		rotate(-16deg) scale(1.25);
	-ms-transform:		rotate(-16deg) scale(1.25);
	-o-transform:			rotate(-16deg) scale(1.25);
;}
.social .forrst:hover span{
	-webkit-transform:	rotate(-11deg) scale(1.25);
	-moz-transform:		rotate(-11deg) scale(1.25);
	-ms-transform:		rotate(-11deg) scale(1.25);
	-o-transform:			rotate(-11deg) scale(1.25);
}
.social .foursquare:hover span{
	-webkit-transform:	rotate(-12deg) scale(1.25);
	-moz-transform:		rotate(-12deg) scale(1.25);
	-ms-transform:		rotate(-12deg) scale(1.25);
	-o-transform:			rotate(-12deg) scale(1.25);
}
.social .gowalla:hover span{
	-webkit-transform:	rotate(4deg) scale(1.25);
	-moz-transform:		rotate(4deg) scale(1.25);
	-ms-transform:		rotate(4deg) scale(1.25);
	-o-transform:			rotate(4deg) scale(1.25);
}
.social .tumblr:hover span{
	-webkit-transform:	rotate(-8deg) scale(1.25);
	-moz-transform:		rotate(-8deg) scale(1.25);
	-ms-transform:		rotate(-8deg) scale(1.25);
	-o-transform:			rotate(-8deg) scale(1.25);
}
.social .google:hover span{
	-webkit-transform:	rotate(10deg) scale(1.25);
	-moz-transform:		rotate(10deg) scale(1.25);
	-ms-transform:		rotate(10deg) scale(1.25);
	-o-transform:			rotate(10deg) scale(1.25);
}
.social .lastfm:hover span{
	-webkit-transform:	rotate(6deg) scale(1.25);
	-moz-transform:		rotate(6deg) scale(1.25);
	-ms-transform:		rotate(6deg) scale(1.25);
	-o-transform:			rotate(6deg) scale(1.25);
}
.social .facebook:hover span{
	-webkit-transform:	rotate(-9deg) scale(1.25);
	-moz-transform:		rotate(-9deg) scale(1.25);
	-ms-transform:		rotate(-9deg) scale(1.25);
	-o-transform:			rotate(-9deg) scale(1.25);
}
.social .flickr:hover span{
	-webkit-transform:	rotate(4deg) scale(1.25);
	-moz-transform:		rotate(4deg) scale(1.25);
	-ms-transform:		rotate(4deg) scale(1.25);
	-o-transform:			rotate(4deg) scale(1.25);
}
.social .behance:hover span{
	-webkit-transform:	rotate(-12deg) scale(1.25);
	-moz-transform:		rotate(-12deg) scale(1.25);
	-ms-transform:		rotate(-12deg) scale(1.25);
	-o-transform:			rotate(-12deg) scale(1.25);
}
.social .youtube:hover span{
	-webkit-transform:	rotate(8deg) scale(1.25);
	-moz-transform:		rotate(8deg) scale(1.25);
	-ms-transform:		rotate(8deg) scale(1.25);
	-o-transform:			rotate(8deg) scale(1.25);
}
.social .linkedin:hover span{
	-webkit-transform:	rotate(-10deg) scale(1.25);
	-moz-transform:		rotate(-10deg) scale(1.25);
	-ms-transform:		rotate(-10deg) scale(1.25);
	-o-transform:			rotate(-10deg) scale(1.25);
}
.social .meetup:hover span{
	-webkit-transform:	rotate(-3deg) scale(1.25);
	-moz-transform:		rotate(-3deg) scale(1.25);
	-ms-transform:		rotate(-3deg) scale(1.25);
	-o-transform:			rotate(-3deg) scale(1.25);
}
.social .rdio:hover span{
	-webkit-transform:	rotate(3deg) scale(1.25);
	-moz-transform:		rotate(3deg) scale(1.25);
	-ms-transform:		rotate(3deg) scale(1.25);
	-o-transform:			rotate(3deg) scale(1.25);
}

/** Portfolio **/
#portfolio header{margin-bottom:1.5em}
#portfolio header hgroup h1{border-bottom:3px double #aaa;display:inline-block;margin:0 0 0.2em;padding:0 1em 0.1em}
#portfolio header hgroup .h4{color:#888;font-weight:400;text-transform:lowercase}
#portfolio .nav{font-size:80%;text-align:center}
#portfolio nav p,
#portfolio nav ul{display:inline-block;}
#portfolio nav ul{
	background: transparent;
	background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(200,200,200,1)), to(rgba(150,150,150,1)));
	background-image: -webkit-linear-gradient(rgba(200,200,200,1), rgba(150,150,150,1));
	background-image: -moz-linear-gradient(top,rgba(200,200,200,1), rgba(150,150,150,1));
	background-image: -o-linear-gradient(top, rgba(200,200,200,1), rgba(150,150,150,1));
	background-image: linear-gradient(top, rgba(200,200,200,1), rgba(150,150,150,1));
	border: 1px solid #666;
	margin-bottom:2em;
	overflow:hidden;
	vertical-align:middle;
	background-clip: border-box;
	
	-webkit-border-radius:	5px;
	-moz-border-radius:		5px;
	-ms-border-radius:			5px;
	-o-border-radius:			5px;
	border-radius:					5px;
	
	-webkit-box-shadow: 	0 0 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 		0 0 3px rgba(0,0,0,0.2);
	-ms-box-shadow: 		0 0 3px rgba(0,0,0,0.2);
	-o-box-shadow: 			0 0 3px rgba(0,0,0,0.2);
	box-shadow: 				0 0 3px rgba(0,0,0,0.2);
}
#portfolio nav li{border-left:1px solid #999;display:block;float:left}
#portfolio nav li:first-child{border-left:none;}
#portfolio nav li a{	
	color: #555;
	border-bottom:none;
	display:block;
	padding:0.4em 0.8em;
	
	-webkit-text-shadow: 	1px 1px 0 rgba(255,255,255,0.3);
	-moz-text-shadow: 		1px 1px 0 rgba(255,255,255,0.3);
	-ms-text-shadow: 		1px 1px 0 rgba(255,255,255,0.3);
	-o-text-shadow: 			1px 1px 0 rgba(255,255,255,0.3);
	text-shadow: 				1px 1px 0 rgba(255,255,255,0.3);
}
#portfolio nav li:first-child a{
	-webkit-border-radius:	5px 0 0 5px;
	-moz-border-radius:		5px 0 0 5px;
	-ms-border-radius:			5px 0 0 5px;
	-o-border-radius:			5px 0 0 5px;
	border-radius:					5px 0 0 5px;
}
#portfolio nav li:last-child a{
	-webkit-border-radius:	0 5px 5px 0;
	-moz-border-radius:		0 5px 5px 0;
	-ms-border-radius:			0 5px 5px 0;
	-o-border-radius:			0 5px 5px 0;
	border-radius:					0 5px 5px 0;
}
#portfolio nav li a:active{
	background: #666;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#666),to(#888));
	background-image: -webkit-linear-gradient(#666, #888);
	background-image: -moz-linear-gradient(top, #666, #888);
	background-image: -o-linear-gradient(top, #666, #888);
	background-image: linear-gradient(top, #666, #888);
	color:#ddd;
	
	-webkit-text-shadow: 	1px 1px 0 rgba(0,0,0,0.3);
	-moz-text-shadow: 		1px 1px 0 rgba(0,0,0,0.3);
	-ms-text-shadow: 		1px 1px 0 rgba(0,0,0,0.3);
	-o-text-shadow: 			1px 1px 0 rgba(0,0,0,0.3);
	text-shadow: 				1px 1px 0 rgba(0,0,0,0.3);
}
#portfolio nav li a.active{
	background: #aaa;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#aaa),to(#ccc));
	background-image: -webkit-linear-gradient(#aaa, #ccc);
	background-image: -moz-linear-gradient(top, #aaa, #ccc);
	background-image: -o-linear-gradient(top, #aaa, #ccc);
	background-image: linear-gradient(top, #aaa, #ccc);
	color:#2081B2;
}
#portfolio p{font-weight:700;margin-right:0.6em;}
#portfolio nav ul+ul{margin-left:2em}

#projects{position:relative}
#projects li{display:inline-block;list-style:none;margin:1.45%;min-width:175px;position:relative;width:21.93%;vertical-align:top}
#projects li a{margin-bottom:0.5em}
#projects li a,
#projects li img{display:block;height:auto;max-width:100%;width:auto}
#projects li a:hover{border-bottom:none}
#projects li a img{border:1px solid #ddd;}
#projects li .details{display:block;font-size:80%;left:0;opacity:0;padding:0.3em 0.5em;position:absolute;top:0;
	-webkit-transition: all 0.35s ease;
	-moz-transition: all 0.35s ease;
}
#projects li:hover .details{background:rgba(255,255,255,0.4);opacity:1;
	-webkit-border-radius:	0 0 5px 0;
	-moz-border-radius:		0 0 5px 0;
	-ms-border-radius:			0 0 5px 0;
	-o-border-radius:			0 0 5px 0;
	border-radius:					0 0 5px 0;
}

/********** Projects Pages ************/
.projects hgroup{margin-bottom:1em}
.projects hgroup .meta{font-weight:400;margin-top:0.25em}

/*
#playpen{left:22.15%;margin-right:0;position:relative;width:77.85%}
#project-nav{left:-77.85%;position:relative;}
*/
#project-nav{margin-bottom:3em;padding-bottom:1em;position:relative;
	
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
}
#project-nav a{
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
#project-nav .loader{top:108%}
#project-nav li{
	float:left;
	list-style:none;
	margin:0 1em 1em 0;
}
#project-nav img{
	border: 3px solid transparent;
	-webkit-border-radius: 3px;
	-moz-border-radius:	 3px;
	-ms-border-radius:		 3px;
	-o-border-radius:		 3px;
	border-radius:		 		 3px;
}
#project-nav li a,
#project-nav li img,
#playpen .display a,
#playpen .display img{display:block;height:auto;max-width:100%;width:auto}

#project-nav .active img{border-color:#ec4f24}

#project-nav a:hover{
	-webkit-transform:	scale3d(1.15, 1.15, 1.15);
	-moz-transform:		scale3d(1.15, 1.15, 1.15);
	-ms-transform:		scale3d(1.15, 1.15, 1.15);
	-o-transform:			scale3d(1.15, 1.15, 1.15);
	transform:				scale3d(1.15, 1.15, 1.15);
}
#project-nav a:hover,
#playpen a:hover{border-bottom:none}
#project-nav a:hover:after{background:rgba(0,0,0,0.75);bottom:110%;content:attr(title);color:white;font-size:80%;left:-1.5em;padding:0.5em;position:absolute;text-align:center;width:10em;
	
	-webkit-border-radius:	3px;
	-moz-border-radius:		3px;
	-ms-border-radius:			3px;
	-o-border-radius:			3px;
	border-radius:		 			3px;
	
	-webkit-box-shadow: 	0 0 1em rgba(0,0,0,0.4);
	-moz-box-shadow: 		0 0 1em rgba(0,0,0,0.4);
	-ms-box-shadow: 		0 0 1em rgba(0,0,0,0.4);
	-o-box-shadow: 			0 0 1em rgba(0,0,0,0.4);
	box-shadow: 				0 0 1em rgba(0,0,0,0.4);
}
#project-nav a:hover:before{border:0.6em solid transparent;border-top-color:rgba(0,0,0,0.75);content:'';display:block;height:0;left:40%;position:absolute;top:-10%;width:0;}
#playpen .display{text-align:center}
#playpen .display > img,
#playpen .display > object,
#playpen .display > iframe{margin:0 auto;
	-webkit-box-shadow: 	0 0 0.8em rgba(0,0,0,0.3);
	-moz-box-shadow: 		0 0 0.8em rgba(0,0,0,0.3);
	-ms-box-shadow: 		0 0 0.8em rgba(0,0,0,0.3);
	-o-box-shadow: 			0 0 0.8em rgba(0,0,0,0.3)
	box-shadow: 				0 0 0.8em rgba(0,0,0,0.3);
}
#playpen .title{margin-bottom:0.5em}

/****** Widgets *******/
.widget-container{margin:1em 0 0;}
.widget-container:first-child{margin-top:0}
.widget-container .title{border-bottom:0.1em solid #aaa;color:#808080;margin-bottom:0.2em}
.widget-container ul li a{
	color:#777;
	display:block;
	padding:0.2em 1em;
	
	-webkit-border-radius:	5px;
	-moz-border-radius:		5px;
	-ms-border-radius:			5px;
	-o-border-radius:			5px;
	border-radius:					5px;
}
.widget-container ul li a:hover{
	background:#ec4f24;
	color:#ddd;
	border-bottom:none;
	padding-left:1.25em;
	
	text-shadow:-1px -1px 0 rgba(0,0,0,0.1);
}

.widget-container .social a{padding:0.2em 0.5em}
.widget-container .social a:hover{background:rgba(255,255,255,0.2);color:#666;padding-left:0.5em;
	-webkit-border-radius: 	25px;
	-moz-border-radius: 		25px;
	-ms-border-radius: 			25px;
	-o-border-radius: 			25px;
	border-radius: 					25px;
}

.widget_search .screen-reader-text{display:none}
.widget_search #s{background:rgba(0,0,0,0.1);color:#777;margin-right:2%;padding:0.7em;width:70%}
.widget_search #s:focus{background-color:rgba(255,255,255,0.8)}
.widget_search #s::-webkit-input-placeholder,
.widget_search #s::-moz-input-placeholder,
.widget_search #s::-ms-input-placeholder,
.widget_search #s::-o-input-placeholder{color:#777}
.widget_search input[type="submit"]{font-size:0.8em;margin:0;padding:0.5em 1em;position:relative;top:-1px;width:28%;}

.widget_search #s, .widget_search input[type="submit"]{
	-webkit-box-sizing:	border-box;
	-moz-box-sizing:	border-box;
	-ms-box-sizing: 	border-box;
	-o-box-sizing: 		border-box;
	box-sizing: 		border-box;
}

.gbox input[type="text"]{background-color:rgba(255,255,255,0.4);border-color:#A7BCAD;margin:0 2% 0 0;width:75%}
.gbox input[type="text"]:focus{background-color:#ddd;border-color:#555}

/******* Author Box ********/
#entry-author-info{
	border:1px solid #ec4f24;
	color:#ccc;
	margin:2em 0;
	opacity:0.2;
	padding:1em;
	position:relative;
	
	-webkit-border-radius:	10px;
	-moz-border-radius:		10px;
	-ms-border-radius:		 	10px;
	-o-border-radius:		 	10px;
	border-radius:		 			10px;
	
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
}
#entry-author-info:hover{opacity:1}
#entry-author-info .avatar{border:5px solid #ccc;float:left;margin:0 0.7em 0.4em 0;
	-webkit-border-radius:	3px;
	-moz-border-radius:		3px;
	-ms-border-radius:		 	3px;
	-o-border-radius:		 	3px;
	border-radius:		 			3px;
}
#entry-author-info h4{line-height:1.2;}
#entry-author-info h4,
#entry-author-info p{
	-webkit-text-shadow:	1px 1px 2px rgba(0,0,0,0.5);
	-moz-text-shadow:		1px 1px 2px rgba(0,0,0,0.5);
	-ms-text-shadow:		1px 1px 2px rgba(0,0,0,0.5);
	-o-text-shadow:			1px 1px 2px rgba(0,0,0,0.5);
	text-shadow:				1px 1px 2px rgba(0,0,0,0.5);
}

/**** Post Navigation ****/
.navigation{border:1px solid #bbb;font-size:80%;margin:2em 0;padding:1em}
.navigation .cbtn{max-width:45%}
.navigation .nav-previous{float:left}
.navigation .nav-next{float:right}

/**** Comments *****/
#comments{margin:2em 0;}
#comments ol{list-style:none;margin:1em 0}
.commentlist .comment{border-top:1px dashed #999;padding:1em}
.commentlist .comment ul{margin-top:1em}
.commentlist>.comment:nth-child(even),
.commentlist .comment .comment:nth-child(odd){background:rgba(255,255,255,0.1)}
.commentlist .comment-awaiting-moderation{background:yellow;display:block;font-size:90%;left:-1em;padding:0.5em 1em;position:relative;top:-1em;width:100%}
.comment a{color:#2081B2}
.comment .avatar{border:1px solid #777;display:block}
.comment .left{
	-webkit-box-shadow:	0 0 8px rgba(0,0,0,0.2);
	-moz-box-shadow:		0 0 8px rgba(0,0,0,0.2);
	-ms-box-shadow:		0 0 8px rgba(0,0,0,0.2);
	-o-box-shadow:			0 0 8px rgba(0,0,0,0.2);
	box-shadow:				0 0 8px rgba(0,0,0,0.2);
}
.comment .left+div{margin-left:90px}
.comment .comment-reply-link{
	background-color: #2081B2;
	background-image: -moz-linear-gradient(top, #449BCF, #2081B2);
	background-image: -o-linear-gradient(top, #449BCF, #2081B2);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #449BCF),color-stop(1, #2081B2));
	background-image: -webkit-linear-gradient(#449BCF, #2081B2);
	background-image: linear-gradient(top, #449BCF, #2081B2);
	border:1px solid #2081B2;
	border-top:none;
	color:#ddd;
	display:block;
	font-size:80%;
	font-weight:700;
	padding:3px;
	text-align:center;
	
	-webkit-border-radius:	0 0 5px 5px;
	-moz-border-radius:		0 0 5px 5px;
	-ms-border-radius:		 	0 0 5px 5px;
	-o-border-radius:		 	0 0 5px 5px;
	border-radius:		 			0 0 5px 5px;
	
	-webkit-text-shadow: 	0 1px 2px rgba(0,0,0,0.5);
	-moz-text-shadow: 		0 1px 2px rgba(0,0,0,0.5);
	-ms-text-shadow: 		0 1px 2px rgba(0,0,0,0.5);
	-o-text-shadow: 			0 1px 2px rgba(0,0,0,0.5);
	text-shadow: 				0 1px 2px rgba(0,0,0,0.5);
}
.comment .comment-reply-link:hover{
	background: #3691C3;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#5BAEE2),to(#3691C3));
	background-image: -webkit-linear-gradient(#5BAEE2, #3691C3);
	background-image: -moz-linear-gradient(top, #5BAEE2, #3691C3);
	background-image: -o-linear-gradient(top, #5BAEE2, #3691C3);
	background-image: linear-gradient(top, #5BAEE2, #3691C3);
	border-color: #3691C3;
}
.comment .comment-meta{font-size:80%;margin-bottom:0.4em}
.comment .children{margin-left:1em}

#commentform label{display:none}
#commentform input[type="text"]{display:block;width:100%;box-sizing:border-box;}
#commentform .col1{float:left;margin-right:3%;width:40%}
#commentform .col1>p{padding:0.6em 0 0}
#commentform .col1>p:first-child{padding-top:0}
#commentform .col2{float:left;width:57%}
#commentform .col2 textarea{box-sizing:border-box;height:9em;width:100%}
#commentform .comment-notes,
#commentform .logged-in-as,
#commentform .form-allowed-tags{font-size:80%;margin-bottom:0.8em}
#commentform .form-submit{clear:both;text-align:right}
#respond input[type="text"], #respond textarea{background-color:rgba(255,255,255,0.4);border-color:#A7BCAD;}
#respond input[type="text"]:focus, #respond textarea:focus{background-color:#ddd;border-color:#555}
#cancel-comment-reply-link{background:yellow;float:right;font-size:70%;padding:0.3em}

/********* FOOTER **********/
#footer{background:-webkit-gradient(linear, left top, left bottom, from(rgba(150,150,150,0.3)), to(rgba(100,100,100,0.3)));border-top:1px solid rgba(50,50,50,0.5);position:relative;top:-1px}
#contact{
	background-color: rgba(0,0,0,0);
	background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(50,50,50,0.15)));
	background-image: -webkit-linear-gradient(rgba(0,0,0,0), rgba(50,50,50,0.15));
	background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(50,50,50,0.15));
	background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(50,50,50,0.15));
	background-image: linear-gradient(top, rgba(0,0,0,0), rgba(50,50,50,0.15));

	border:1px solid rgba(50,50,50,0.5);
	color: rgba(50,50,50,1);
	padding:0.4em 0.6em;
	
	-webkit-border-radius:	3px;
	-moz-border-radius:		3px;
	-ms-border-radius:		3px;
	-o-border-radius:		3px;
	border-radius:			3px;
}
#contact:hover{
	background-color: rgba(0,0,0,0);
	background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(220,220,220,0.8)),to(rgba(150,150,150,0.8)));
	background-image: -webkit-linear-gradient(rgba(220,220,220,0.8), rgba(150,150,150,0.8));
	background-image: -moz-linear-gradient(top, rgba(220,220,220,0.8), rgba(150,150,150,0.8));
	background-image: -o-linear-gradient(top, rgba(220,220,220,0.8), rgba(150,150,150,0.8));
	background-image: linear-gradient(top, rgba(220,220,220,0.8), rgba(150,150,150,0.8));
	border-color:rgb(216,59,16);
	box-shadow:0 0 4px rgba(0,0,0,0.2);
	text-shadow:-1px -1px 0 rgba(255,255,255,0.2);
}
#contact:after{content:' \2192';display:inline;}
#footer .gform_wrapper li{list-style:none;margin:0}
#footer .gform_wrapper{width:35em}
#footer .gform_wrapper .third{padding-right:1em;width:33.33333%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: 	border-box;
	-ms-box-sizing: 	border-box;
	box-sizing: 		border-box;
}
#footer .gform_wrapper .third:nth-child(3){padding-right:0}
#footer .gform_wrapper .full{clear:both;width:100%}
#footer .gform_body input,
#footer .gform_body textarea{width:100%}
.gform_wrapper .gform_validation_container{display:none}


/** Project Page Layout on Smaller Screens **/
@media handheld, screen and (max-width: 860px){

	.projects #playpen .display,
	.projects #playpen .details{width:auto;float:none;margin-left:0px;margin-right:0px;}
	.projects #playpen .details{margin-top:2em}
}